<template>
	<view>
		<!-- 发布页面 -->

		<!-- 自定义头部导航栏 -->
		<!-- :statusBar="true" rightText="发布" left-icon="back" @click-left="back" @click-right="submit" -->
		<UniNavBar :statusBar="true" right-text='发布' left-icon="back" @click-left="back" @click-right="submit">


			<!--  @tap="changelook"  点击文字弹框 -->
			<view class="u-f-ajc " @tap="changelook">

				{{yinsi}}

				<!-- 下拉箭头小图标 -->
				<view class="icon iconfont icon-xialazhankai"></view>


			</view>

		</UniNavBar>

		<!--  文本框 -->


		<view class="uni-textarea">
			<textarea v-model="text" placeholder="说一句话吧" />

		</view>

		<!--  上传发布图片 -->

		<UploudImages @upload='upload' :imageList='imageList' @getimageList='getimageList'></UploudImages>



		<!--  弹框组件 -->
		<UniPopup :show="showpopup" position="middle" mode="fixed" @hidePopup="hidePopup">
			<view class="gonggao">
				<view class="u-f-ajc">
					<image src="../../static/common/addinput.png" mode="widthFix"></image>
				</view>
				<view>1.涉及黄色，政治，广告及骚扰信息</view>
				<view>2.涉及黄色，政治，广告及骚扰信息</view>
				<view>3.涉及黄色，政治，广告及骚扰信息</view>
				<view>4.涉及黄色，政治，广告及骚扰信息</view>
				<button type="default" @tap="hidePopup">朕知道了</button>
			</view>



		</UniPopup>





	</view>
</template>

<script>
	import UniNavBar from '../../components/uni-nav-bar/uni-nav-bar.vue'


	import UploudImages from '../../components/common/uploud-images.vue'

	import UniPopup from '../../components/uni-popup/uni-popup.vue'

	let changelook = ['所有人可见', '仅自己可见'];
	export default {
		components: {
			UniNavBar,
			UploudImages,
			UniPopup
		},

		onLoad(options) {
			uni.getStorage({
				key: 'val',
				success: (res) => {
					console.log(res.data);
					// text: "请输入想要发布的内容11111", imageList: Array(2)}
					let {
						text,
						imageList
					} = res.data

					this.text = text;
					// var arr=	[]
					// this.imageList=[...arr,...imageList]
					this.imageList = imageList



				}
			});

		},



		data() {
			return {


				yinsi: "所有人可见",
				text: '请输入想要发布的内容',
				imageList: [],
				showpopup: true,
				isget: false, //   false  表示没有发布  true 表示发布了

			}
		},
		methods: {

			//父子组件之间传值
			upload(imgList) {
				console.log('xxxxx')
				this.imageList = imgList
			},


			// 返回  自定义需要自己实现返回功能
			back() {
				uni.navigateBack({
					delta: 1
				})

			},

			getimageList(item) {
				this.imageList = item
			},

			changelook() {
				//  从底部向上弹出操作菜单   实现选择
				uni.showActionSheet({
					itemList: changelook,
					success: (res) => {
						console.log(res)
						// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						this.yinsi = changelook[res.tapIndex]
					}

				});
			},


			//点击按钮关闭 公告栏
			hidePopup() {
				this.showpopup = false
			},


			//发布与草稿功能

			submit() {


			},
			//保存问草稿功能
			baocun() {
				//  this.text  存起来 
				//    图片也要存起来  imglist  里面的地址也需要存储起来

				uni.showModal({
					content: '是否要保存为草稿',
					cancelText: '不保存',
					confirmText: '保存',
					success: (res) => {
						if (res.confirm) {
							console.log('保存')
							//text  数据 以及 imglist 存储起来 

							console.log(this.imageList)
							var obj = {
								text: this.text,
								imageList: this.imageList

							}
							uni.setStorage({
								key: 'val',
								data: obj,
								success: function() {

									console.log('success');
								}
							});

						} else {
							console.log('不保存')
						}

						this.isget = true
						//返回
						uni.navigateBack({
							delta: 1
						})

					}
				})


			}
		},

		//返回按钮 
		onBackPress() {
			// this.text 有值   !this.text  没有值
			if (!this.text && this.imglist.length < 1) return


			if (!this.isget) {
				this.baocun()
				return true
			}
		},
	}
</script>

<style scoped>
	.uni-textarea {
		border: 1upx solid #EEEEEE;
	}


	.gonggao {
		width: 500upx;
		/*  upx  微信小程序 rpx  一样    1px =2upx =2rpx*/
	}

	.gonggao image {
		width: 75%;
		margin-bottom: 20upx;
	}

	.gonggao button {
		margin-top: 20upx;
		background: #FFE934;
		color: #171606;
	}
</style>
